<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${content.title} - ${site.seoTitle} - Powered by JPROCMS</title>
  <meta name="keywords" content="${content.keywords!site.seoKey}">
  <meta name="description" content="${content.description!site.seoDesc}">
  [#include '../includes/common_res.html'/]
  <link rel="stylesheet" href="${resource}/static/plugins/pdfjs-dist/legacy/web/pdf_viewer.min.css">

  <style>

    #viewerWrapper {
      position: relative;
      width: 100%;
    }

    .viewerWrapperNormal {
      height: 960px;
    }

    .viewerWrapperFull {
      height: calc(100% - 46px);
    }

    #viewerContainer {
      outline: none;
      overflow: auto;
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body tabindex="1">
[#if config.grade>1&&!dynamic]
  <!--# include file="/${site.sitePathPrefix}/includes/header.html" -->
[#else]
  [#include '../includes/header.html'/]
[/#if]
<div class="bg-gray-200">
  <div class="container">
    <nav class="row" aria-label="breadcrumb">
      <ol class="col list-inline my-2">
        <li class="list-inline-item"><a href="${site.url}">首页</a></li>
        [#list channel.nodeList as c]
        <li class="list-inline-item">></li>
        <li class="list-inline-item">[@ZUrl object=c/]</li>
        [/#list]
      </ol>
    </nav>
  </div>
</div>
<div class="container mt-4">
  <div class="row">
    <div class="col">
      <h3 class="cms-detail-title">${content.title}</h3>
      <div class="mt-3 pb-2 border-bottom text-muted">
        <span>${ZFormat(content.releaseTime, 'yyyy-MM-dd HH:mm:ss')}</span>
        [#if content.source??]<span class="ml-2">${content.source}</span>[/#if]
        [#if content.author??]<span class="ml-2">${content.author}</span>[/#if]
        <i class="ml-2 far fa-eye"></i> <span id="views"></span>
        <script>
          axios.get('${api}/content/view/${content.id?c}').then(function (response) {
            $('#views').text(response.data.data);
          });
        </script>
      </div>
      [#if content.ext.docPdf??]
      <div id="fullContainer" class="mt-3 text-center bg-secondary border">
        <div id="toolbar" class="position-relative sticky-top p-1">
          <button class="btn btn-outline-light" onclick="pdfViewer.decreaseScale()">-</button>
          <button class="btn btn-outline-light ml-2" onclick="pdfViewer.increaseScale()">+</button>
          <button id="fullscreenButton" class="btn btn-outline-light ml-2" onclick="fullscreen()">全屏</button>
          <button id="exitFullscreenButton" class="btn btn-outline-light ml-2 cm-hidden" onclick="exitFullscreen()">退出</button>
        </div>
        <div id="viewerWrapper" class="bg-secondary viewerWrapperNormal">
          <div id="viewerContainer" tabindex="0">
            <div id="viewer" class="pdfViewer"></div>
          </div>
        </div>
      </div>
      <script src="${resource}/static/plugins/pdfjs-dist/legacy/build/pdf.min.js"></script>
      <script src="${resource}/static/plugins/pdfjs-dist/legacy/web/pdf_viewer.min.js"></script>

      <script>
        if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
          // eslint-disable-next-line no-alert
          alert("Please build the pdfjs-dist library using\n  `gulp dist-install`");
        }

        // The workerSrc property shall be specified.
        //
        pdfjsLib.GlobalWorkerOptions.workerSrc =
          "${resource}/static/plugins/pdfjs-dist/legacy/build/pdf.worker.min.js";

        // Some PDFs need external cmaps.
        //
        const CMAP_URL = "${resource}/static/plugins/pdfjs-dist/cmaps/";
        const CMAP_PACKED = true;

        const DEFAULT_URL = "${content.ext.docPdf}";
        // To test the AcroForm and/or scripting functionality, try e.g. this file:
        // "../../test/pdfs/160F-2019.pdf"

        const ENABLE_XFA = true;
        const SEARCH_FOR = ""; // try "Mozilla";

        const SANDBOX_BUNDLE_SRC = "${resource}/static/plugins/pdfjs-dist/legacy/build/pdf.sandbox.js";

        const container = document.getElementById("viewerContainer");

        const eventBus = new pdfjsViewer.EventBus();

        // (Optionally) enable hyperlinks within PDF files.
        const pdfLinkService = new pdfjsViewer.PDFLinkService({
          eventBus,
        });

        // (Optionally) enable find controller.
        const pdfFindController = new pdfjsViewer.PDFFindController({
          eventBus,
          linkService: pdfLinkService,
        });

        // (Optionally) enable scripting support.
        const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({
          eventBus,
          sandboxBundleSrc: SANDBOX_BUNDLE_SRC,
        });

        const pdfViewer = new pdfjsViewer.PDFViewer({
          container,
          eventBus,
          linkService: pdfLinkService,
          findController: pdfFindController,
          scriptingManager: pdfScriptingManager,
        });
        pdfLinkService.setViewer(pdfViewer);
        pdfScriptingManager.setViewer(pdfViewer);

        eventBus.on("pagesinit", function () {
          // We can use pdfViewer now, e.g. let's change default scale.
          pdfViewer.currentScaleValue = "page-width";

          // We can try searching for things.
          if (SEARCH_FOR) {
            eventBus.dispatch("find", {type: "", query: SEARCH_FOR});
          }
        });

        // Loading document.
        const loadingTask = pdfjsLib.getDocument({
          url: DEFAULT_URL,
          cMapUrl: CMAP_URL,
          cMapPacked: CMAP_PACKED,
          enableXfa: ENABLE_XFA,
        });
        (async function () {
          const pdfDocument = await loadingTask.promise;
          // Document loaded, specifying document for the viewer and
          // the (optional) linkService.
          pdfViewer.setDocument(pdfDocument);

          pdfLinkService.setDocument(pdfDocument, null);
        })();


        var fullContainer = document.getElementById('fullContainer');
        var viewerWrapper = document.getElementById('viewerWrapper');

        // 进入全屏
        function fullscreen() {
          if (fullContainer.requestFullscreen) {
            fullContainer.requestFullscreen();
          } else if (fullContainer.mozRequestFullScreen) {
            fullContainer.mozRequestFullScreen();
          } else if (fullContainer.webkitRequestFullscreen) {
            fullContainer.webkitRequestFullscreen();
          } else if (fullContainer.msRequestFullscreen) {
            fullContainer.msRequestFullscreen();
          }
        }
        // 退出全屏
        function exitFullscreen() {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        }

        function isFullscreen() {
          return !!(document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement);
        }

        function _fullscreenChange() {
          if (isFullscreen()) {
            $('#fullscreenButton').hide();
            $('#exitFullscreenButton').show();
            $(fullContainer).addClass('overflow-auto');
            $(viewerWrapper).addClass('viewerWrapperFull').removeClass('viewerWrapperNormal');
            $('#viewerContainer').focus();
          } else {
            $('#fullscreenButton').show();
            $('#exitFullscreenButton').hide();
            $(fullContainer).removeClass('overflow-auto');
            $(viewerWrapper).addClass('viewerWrapperNormal').removeClass('viewerWrapperFull');
          }
        }

        function _addFullscreenChangeListeners() {
          window.addEventListener("fullscreenchange", _fullscreenChange);
          window.addEventListener("mozfullscreenchange", _fullscreenChange);
          window.addEventListener("webkitfullscreenchange", _fullscreenChange);
          window.addEventListener("MSFullscreenChange", _fullscreenChange);
        }

        _addFullscreenChangeListeners();
      </script>
      [/#if]
      <div class="mt-4" id="contentText">[#noescape]${content.text!}[/#noescape]</div>
      <div class="lead d-flex justify-content-center text-info">
        <div class="cm-pointer" onclick="contentUp()"><i class="far fa-thumbs-up"></i> <span id="ups"></span></div>
        <div class="cm-pointer ml-4" onclick="contentDown()"><i class="far fa-thumbs-down"></i> <span id="downs"></span></div>
      </div>
      <script>
        function contentUp() {
          axios.post('${api}/content/up/${content.id?c}').then(function (response) {
            if (response.data.data <= 0) {
              alert("您已经点赞过了！");
              return;
            }
            $('#ups').text(response.data.data);
          });
        }

        function contentDown() {
          axios.post('${api}/content/down/${content.id?c}').then(function (response) {
            if (response.data.data <= 0) {
              alert("您已经踩过了！");
              return;
            }
            $('#downs').text(response.data.data);
          });
        }

        axios.get('${api}/content/count/${content.id?c}').then(function (response) {
          $('#ups').text(response.data.data.ups);
          $('#downs').text(response.data.data.downs);
        });
        $('#contentText img').addClass('img-fluid');
      </script>

      <ul class="mt-4 list-unstyled">
        [@ZContentSide id=content.id releaseTime=content.releaseTime topLevel=content.topLevel channelId=content.channelId next=false; c]
          <li class="text-truncate mt-2">
            <strong>上一篇：</strong>[#if c??][@ZUrl object=c class="common-link"/][#else]没有了[/#if]
          </li>
        [/@ZContentSide]
        [@ZContentSide id=content.id releaseTime=content.releaseTime topLevel=content.topLevel channelId=content.channelId next=true; c]
          <li class="text-truncate mt-2">
            <strong>下一篇：</strong>[#if c??][@ZUrl object=c class="common-link"/][#else]没有了[/#if]
          </li>
        [/@ZContentSide]
      </ul>

      [@ZContentRelateList contentId=content.id count='5'; list]
      [#if list?size gt 0]
        <h5 class="mt-4 border-bottom"><span class="common-block-head-bottom">相关新闻</span></h5>
        <ul class="list-unstyled mt-3">
          [#list list as c]
            <li class="text-truncate mt-2">[@ZUrl object=c class="common-link"/]</li>
          [/#list]
        </ul>
      [/#if]
      [/@ZContentRelateList]
    </div>
  </div>
</div>
[#if config.grade>1&&!dynamic]
    <!--# include file="/${site.sitePathPrefix}/includes/footer.html" -->
[#else]
    [#include '../includes/footer.html'/]
[/#if]
</body>
</html>
[/#escape]
